<template>
  <div id="admin_img_part">
    <CommonTable
      :query-api="'/imagePartMap/page'"
      :query-params="param"
      :columns="columns"
      @search-finish="searchFinish"
      ref="imgmapRef"
      name="admin_image_map_table"
    >
      <template #tableSearchForm>
        <a-form id="internal_drawer_form_model" :model="formInfo" layout="inline">
          <a-form-item label="医院">
            <a-select
              v-model:value="formInfo.hospId"
              style="width: 240px"
              popupClassName="common_select_dropdown"
              allowClear
              show-search
              :filter-option="filterOption"
            >
              <a-select-option
                v-for="item in hospList"
                :key="item.id"
                :value="item.id"
                :desc="item.desc"
                :code="item.code"
                >{{ item.desc }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="禁用状态">
            <a-select
              v-model:value="formInfo.disabled"
              style="width: 120px"
              popupClassName="common_select_dropdown"
            >
              <a-select-option :value="''" :key="''">全部</a-select-option>
              <a-select-option :value="'false'" :key="'false'">启用</a-select-option>
              <a-select-option :value="'true'" :key="'true'">禁用</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item class="filter_footer" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
            <a-space>
              <a-button type="primary" @click="onSerach" :loading="loading" :disabled="loading"
                >查询</a-button
              >
              <a-button @click="resetForm" :loading="loading" :disabled="loading">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </template>
      <template #otherAction="{ record }">
        <a-switch
          style="margin-left: 10px"
          size="small"
          checkedChildren="启用"
          unCheckedChildren="禁用"
          @change="handleDisabled(record)"
          :checked="!record.disabled"
        />
      </template>
    </CommonTable>
  </div>
</template>
<script lang="ts" setup>
import CommonTable from '@/components/common_table/index.vue'
import type { TColumn } from '@/components/common_table/type'
import { getAllHospList } from '@/axios/api/options_api'
import { imagePartMapState } from '@/axios/api/slice_api'

import { filterOption } from '@/utils/filter_util'
import type { OptionsType } from '@/axios/api/type'
import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
import type { FromType } from './type.ts'
import { cloneDeep } from 'lodash-es'
const imgmapRef = ref()
const columns = ref<TColumn[]>([
  {
    title: '医院名称',
    fixed: 'left',
    dataIndex: 'hospName',
    key: 'hospName',
    align: 'left',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '医院编码',
    dataIndex: 'hospCode',
    key: 'hospCode',
    align: 'left',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '部位/项目关键词',
    dataIndex: 'keywordName',
    key: 'keywordName',
    align: 'left',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    dataIndex: 'keywordTypeName',
    key: 'keywordTypeName',
    title: '关键词类型',
    align: 'left',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '切面所属类型',
    dataIndex: 'partName',
    key: 'partName',
    align: 'center',
    width: 180,
    showCol: true
  },
  {
    title: '是否禁用',
    fixed: 'right',
    width: 190,
    key: 'action',
    align: 'center',
    showCol: true
  }
])
const formInfo = ref<FromType>({
  hospId: '',
  disabled: ''
})
const param = ref<FromType>({
  ...cloneDeep(formInfo.value),
  disabled: formInfo.value.disabled ? JSON.parse(formInfo.value.disabled.toString()) : ''
})
const loading = ref(false)
const hospList = ref<OptionsType[]>([])
async function getOptionList() {
  const hospInfo = await getAllHospList().catch(() => {
    return {
      code: 400,
      data: []
    }
  })
  hospList.value = hospInfo.data
  onSerach()
}
function handleDisabled(record: any) {
  imagePartMapState({ id: record.id }).then(() => {
    onSerach()
  })
}
const stopFormWatcher = watch(
  formInfo,
  () => {
    param.value = cloneDeep(formInfo.value)
    param.value.disabled = formInfo.value.disabled
      ? JSON.parse(formInfo.value.disabled.toString())
      : ''
  },
  {
    deep: true
  }
)
function searchFinish() {
  loading.value = false
}
function resetForm() {
  formInfo.value = {
    hospId: '',
    disabled: ''
  }
  param.value = {
    hospId: '',
    disabled: ''
  }
  onSerach()
}
function onSerach() {
  if (imgmapRef.value) {
    imgmapRef.value.getPage(param.value)
  }
}
onMounted(() => {
  getOptionList()
})
onBeforeUnmount(() => {
  stopFormWatcher()
})
</script>
<style lang="scss" scoped>
#admin_img_part {
  @include w-h-cover();
}
</style>
